1 सितंबर 2025हिन्दी

एसिंक्रोनस एक्शन से शुरू होने वाले सुव्यवस्थित स्टेट मैनेजमेंट के लिए रिएक्ट के useActionState हुक को एक्सप्लोर करें। अपने एप्लिकेशन की दक्षता और उपयोगकर्ता अनुभव को बढ़ाएँ।

रिएक्ट useActionState इम्प्लीमेंटेशन: एक्शन-आधारित स्टेट मैनेजमेंट

रिएक्ट का useActionState हुक, जो हाल के संस्करणों में पेश किया गया है, एसिंक्रोनस एक्शन के परिणामस्वरूप होने वाले स्टेट अपडेट को प्रबंधित करने के लिए एक परिष्कृत दृष्टिकोण प्रदान करता है। यह शक्तिशाली टूल म्यूटेशन को संभालने, यूआई को अपडेट करने और एरर स्टेट्स को प्रबंधित करने की प्रक्रिया को सुव्यवस्थित करता है, खासकर जब रिएक्ट सर्वर कंपोनेंट्स (RSC) और सर्वर एक्शन के साथ काम कर रहे हों। यह गाइड useActionState की जटिलताओं का पता लगाएगा, जिसमें कार्यान्वयन के लिए व्यावहारिक उदाहरण और सर्वोत्तम अभ्यास प्रदान किए जाएंगे।

एक्शन-आधारित स्टेट मैनेजमेंट की आवश्यकता को समझना

पारंपरिक रिएक्ट स्टेट मैनेजमेंट में अक्सर कंपोनेंट्स के भीतर लोडिंग और एरर स्टेट्स को अलग-अलग प्रबंधित करना शामिल होता है। जब कोई एक्शन (जैसे, फॉर्म सबमिट करना, डेटा फ़ेच करना) किसी स्टेट अपडेट को ट्रिगर करता है, तो डेवलपर्स आमतौर पर इन स्टेट्स को कई useState कॉल्स और संभावित रूप से जटिल कंडीशनल लॉजिक के साथ प्रबंधित करते हैं। useActionState एक स्वच्छ और अधिक एकीकृत समाधान प्रदान करता है।

एक सरल फॉर्म सबमिशन परिदृश्य पर विचार करें। useActionState के बिना, आपके पास हो सकता है:

फॉर्म डेटा के लिए एक स्टेट वेरिएबल।
यह ट्रैक करने के लिए एक स्टेट वेरिएबल कि क्या फॉर्म सबमिट हो रहा है (लोडिंग स्टेट)।
किसी भी एरर मैसेज को रखने के लिए एक स्टेट वेरिएबल।

यह दृष्टिकोण वर्बोस कोड और संभावित विसंगतियों को जन्म दे सकता है। useActionState इन चिंताओं को एक ही हुक में समेकित करता है, जिससे लॉजिक सरल होता है और कोड पठनीयता में सुधार होता है।

useActionState का परिचय

useActionState हुक दो आर्गुमेंट्स स्वीकार करता है:

एक एसिंक्रोनस फ़ंक्शन ("एक्शन") जो स्टेट अपडेट करता है। यह एक सर्वर एक्शन या कोई भी एसिंक्रोनस फ़ंक्शन हो सकता है।
एक प्रारंभिक स्टेट मान।

यह दो एलिमेंट्स वाला एक एरे लौटाता है:

वर्तमान स्टेट मान।
एक्शन को डिस्पैच करने के लिए एक फ़ंक्शन। यह फ़ंक्शन एक्शन से जुड़े लोडिंग और एरर स्टेट्स को स्वचालित रूप से प्रबंधित करता है।

यहाँ एक मूल उदाहरण है:


import { useActionState } from 'react';

async function updateServer(prevState, formData) {
  // एक एसिंक्रोनस सर्वर अपडेट का अनुकरण करें।
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     return 'Failed to update server.';
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Initial State');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Name:
      
      
      State: {state}
    
  );
}

इस उदाहरण में:

updateServer एक एसिंक्रोनस एक्शन है जो सर्वर को अपडेट करने का अनुकरण करता है। यह पिछली स्टेट और फॉर्म डेटा प्राप्त करता है।
useActionState स्टेट को 'Initial State' के साथ इनिशियलाइज़ करता है और वर्तमान स्टेट और dispatch फ़ंक्शन लौटाता है।
handleSubmit फ़ंक्शन फॉर्म डेटा के साथ dispatch को कॉल करता है। useActionState एक्शन निष्पादन के दौरान लोडिंग और एरर स्टेट्स को स्वचालित रूप से संभालता है।

लोडिंग और एरर स्टेट्स को संभालना

useActionState के प्रमुख लाभों में से एक इसका लोडिंग और एरर स्टेट्स का अंतर्निहित प्रबंधन है। dispatch फ़ंक्शन एक प्रॉमिस लौटाता है जो एक्शन के परिणाम के साथ रिज़ॉल्व होता है। यदि एक्शन कोई एरर फेंकता है, तो प्रॉमिस एरर के साथ रिजेक्ट हो जाता है। आप इसका उपयोग यूआई को तदनुसार अपडेट करने के लिए कर सकते हैं।

लोडिंग संदेश और एरर संदेश प्रदर्शित करने के लिए पिछले उदाहरण को संशोधित करें:


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // एक एसिंक्रोनस सर्वर अपडेट का अनुकरण करें।
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Failed to update server.');
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateServer, 'Initial State');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    setIsSubmitting(true);
    setErrorMessage(null);

    try {
      const result = await dispatch(formData);
      console.log(result);
    } catch (error) {
      console.error("Error during submission:", error);
      setErrorMessage(error.message);
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    
      Name:
      
      
      {isSubmitting && Loading...}
      {errorMessage && Error: {errorMessage}}
      State: {state}
    
  );
}

मुख्य परिवर्तन:

हमने लोडिंग और एरर स्टेट्स को ट्रैक करने के लिए isSubmitting और errorMessage स्टेट वेरिएबल्स जोड़े हैं।
handleSubmit में, हम dispatch को कॉल करने से पहले isSubmitting को true पर सेट करते हैं और errorMessage को अपडेट करने के लिए किसी भी एरर को पकड़ते हैं।
हम सबमिट करते समय सबमिट बटन को अक्षम कर देते हैं और लोडिंग और एरर संदेशों को सशर्त रूप से प्रदर्शित करते हैं।

रिएक्ट सर्वर कंपोनेंट्स (RSC) में सर्वर एक्शन के साथ useActionState

useActionState तब विशेष रूप से उपयोगी होता है जब इसे रिएक्ट सर्वर कंपोनेंट्स (RSC) और सर्वर एक्शन के साथ उपयोग किया जाता है। सर्वर एक्शन ऐसे फ़ंक्शन होते हैं जो सर्वर पर चलते हैं और सीधे डेटा स्रोतों को बदल सकते हैं। वे आपको एपीआई एंडपॉइंट लिखे बिना सर्वर-साइड ऑपरेशन करने की अनुमति देते हैं।

ध्यान दें: इस उदाहरण के लिए सर्वर कंपोनेंट्स और सर्वर एक्शन के लिए कॉन्फ़िगर किए गए रिएक्ट वातावरण की आवश्यकता है।


// app/actions.js (सर्वर एक्शन)
'use server';

import { cookies } from 'next/headers'; //उदाहरण, Next.js के लिए

export async function updateName(prevState, formData) {
  const name = formData.get('name');

  if (!name) {
    return 'Please enter a name.';
  }

  try {
    // डेटाबेस अपडेट का अनुकरण करें।
    await new Promise(resolve => setTimeout(resolve, 1000));

    cookies().set('userName', name);

    return `Updated name to: ${name}`; //सफलता!

  } catch (error) {
    console.error("Database update failed:", error);
    return 'Failed to update name.'; // महत्वपूर्ण: एक संदेश लौटाएं, एरर न फेंकें
  }
}


// app/page.jsx (रिएक्ट सर्वर कंपोनेंट)
'use client';

import { useActionState } from 'react';
import { updateName } from './actions';

function MyComponent() {
  const [state, dispatch] = useActionState(updateName, 'Initial State');

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const result = await dispatch(formData);
    console.log(result);
  }

  return (
    
      Name:
      
      
      State: {state}
    
  );
}

export default MyComponent;

इस उदाहरण में:

updateName app/actions.js में परिभाषित एक सर्वर एक्शन है। यह पिछली स्टेट और फॉर्म डेटा प्राप्त करता है, डेटाबेस को अपडेट करता है (अनुकरण), और एक सफलता या एरर संदेश लौटाता है। महत्वपूर्ण रूप से, एक्शन एक एरर फेंकने के बजाय एक संदेश लौटाता है। सर्वर एक्शन सूचनात्मक संदेश लौटाना पसंद करते हैं।
useActionState हुक का उपयोग करने के लिए कंपोनेंट को एक क्लाइंट कंपोनेंट ('use client') के रूप में चिह्नित किया गया है।
handleSubmit फ़ंक्शन फॉर्म डेटा के साथ dispatch को कॉल करता है। useActionState सर्वर एक्शन के परिणाम के आधार पर स्टेट अपडेट को स्वचालित रूप से प्रबंधित करता है।

सर्वर एक्शन के लिए महत्वपूर्ण विचार

सर्वर एक्शन में एरर हैंडलिंग: एरर फेंकने के बजाय, अपने सर्वर एक्शन से एक सार्थक एरर संदेश लौटाएं। useActionState इस संदेश को नई स्टेट मानेगा। यह क्लाइंट पर ग्रेसफुल एरर हैंडलिंग की अनुमति देता है।
ऑप्टिमिस्टिक अपडेट्स (Optimistic Updates): कथित प्रदर्शन को बेहतर बनाने के लिए सर्वर एक्शन को ऑप्टिमिस्टिक अपडेट्स के साथ इस्तेमाल किया जा सकता है। आप यूआई को तुरंत अपडेट कर सकते हैं और यदि एक्शन विफल हो जाता है तो वापस लौट सकते हैं।
पुनर्वैधीकरण (Revalidation): एक सफल म्यूटेशन के बाद, यह सुनिश्चित करने के लिए कि यूआई नवीनतम स्थिति को दर्शाता है, कैश्ड डेटा को पुनर्वैधीकृत करने पर विचार करें।

उन्नत useActionState तकनीकें

1. जटिल स्टेट अपडेट के लिए एक रिड्यूसर का उपयोग करना

अधिक जटिल स्टेट लॉजिक के लिए, आप useActionState को एक रिड्यूसर फ़ंक्शन के साथ जोड़ सकते हैं। यह आपको स्टेट अपडेट को एक पूर्वानुमानित और रखरखाव योग्य तरीके से प्रबंधित करने की अनुमति देता है।


import { useActionState } from 'react';
import { useReducer } from 'react';

const initialState = {
  count: 0,
  message: 'Initial State',
};

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'SET_MESSAGE':
      return { ...state, message: action.payload };
    default:
      return state;
  }
}

async function updateState(state, action) {
  // एसिंक्रोनस ऑपरेशन का अनुकरण करें।
  await new Promise(resolve => setTimeout(resolve, 500));

  switch (action.type) {
    case 'INCREMENT':
      return reducer(state, action);
    case 'DECREMENT':
      return reducer(state, action);
    case 'SET_MESSAGE':
      return reducer(state, action);
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useActionState(updateState, initialState);

  return (
    
      Count: {state.count}
      Message: {state.message}
      
      
      
    
  );
}

2. useActionState के साथ ऑप्टिमिस्टिक अपडेट्स

ऑप्टिमिस्टिक अपडेट्स यूआई को तुरंत अपडेट करके उपयोगकर्ता अनुभव को बेहतर बनाते हैं जैसे कि एक्शन सफल हो गया हो, और फिर यदि एक्शन विफल हो जाता है तो अपडेट को वापस कर देते हैं। यह आपके एप्लिकेशन को अधिक प्रतिक्रियाशील महसूस करा सकता है।


import { useActionState } from 'react';
import { useState } from 'react';

async function updateServer(prevState, formData) {
  // एक एसिंक्रोनस सर्वर अपडेट का अनुकरण करें।
  await new Promise(resolve => setTimeout(resolve, 1000));

  const data = Object.fromEntries(formData);

  if (data.name === "error") {
     throw new Error('Failed to update server.');
  }

  return `Updated name to: ${data.name}`;
}

function MyComponent() {
  const [name, setName] = useState('Initial Name');
  const [state, dispatch] = useActionState(async (prevName, newName) => {
    try {
      const result = await updateServer(prevName, {
        name: newName,
      });
      return newName; // सफलता पर अपडेट करें
    } catch (error) {
      // एरर पर वापस लौटें
      console.error("Update failed:", error);
      setName(prevName);
      return prevName;
    }
  }, name);

  async function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const newName = formData.get('name');
    setName(newName); // आशावादी रूप से यूआई अपडेट करें
    await dispatch(newName);
  }

  return (
    
      Name:
      
      
      Current Name: {name}
      State: {state}
    
  );
}

3. एक्शन को डिबाउंस करना

कुछ परिदृश्यों में, आप एक्शन को बहुत बार डिस्पैच होने से रोकने के लिए उन्हें डिबाउंस करना चाह सकते हैं। यह खोज इनपुट जैसे परिदृश्यों के लिए उपयोगी हो सकता है जहाँ आप केवल उपयोगकर्ता के एक निश्चित अवधि के लिए टाइप करना बंद करने के बाद ही एक्शन को ट्रिगर करना चाहते हैं।


import { useActionState } from 'react';
import { useState, useEffect } from 'react';

async function searchItems(prevState, query) {
  // एसिंक्रोनस खोज का अनुकरण करें।
  await new Promise(resolve => setTimeout(resolve, 500));

  return `Search results for: ${query}`;
}

function MyComponent() {
  const [query, setQuery] = useState('');
  const [state, dispatch] = useActionState(searchItems, 'Initial State');

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (query) {
        dispatch(query);
      }
    }, 300); // 300ms के लिए डिबाउंस करें

    return () => clearTimeout(timeoutId);
  }, [query, dispatch]);

  return (
    
      Search:
       setQuery(e.target.value)}
      />
      State: {state}
    
  );
}

useActionState के लिए सर्वोत्तम अभ्यास

एक्शन को शुद्ध रखें: सुनिश्चित करें कि आपके एक्शन शुद्ध फ़ंक्शन हैं (या जितना संभव हो उतना करीब)। उनमें स्टेट को अपडेट करने के अलावा कोई साइड इफेक्ट नहीं होना चाहिए।
एरर को ग्रेसफुली हैंडल करें: हमेशा अपने एक्शन में एरर को हैंडल करें और उपयोगकर्ता को सूचनात्मक एरर संदेश प्रदान करें। जैसा कि ऊपर सर्वर एक्शन के साथ उल्लेख किया गया है, एरर फेंकने के बजाय सर्वर एक्शन से एक एरर संदेश स्ट्रिंग लौटाने का पक्ष लें।
प्रदर्शन को अनुकूलित करें: अपने एक्शन के प्रदर्शन निहितार्थों के प्रति सचेत रहें, खासकर जब बड़े डेटासेट के साथ काम कर रहे हों। अनावश्यक री-रेंडर से बचने के लिए मेमोइज़ेशन तकनीकों का उपयोग करने पर विचार करें।
पहुंच पर विचार करें (Consider Accessibility): सुनिश्चित करें कि आपका एप्लिकेशन सभी उपयोगकर्ताओं के लिए सुलभ बना रहे, जिसमें विकलांग लोग भी शामिल हैं। उपयुक्त ARIA एट्रिब्यूट्स और कीबोर्ड नेविगेशन प्रदान करें।
पूरी तरह से परीक्षण (Thorough Testing): यह सुनिश्चित करने के लिए यूनिट टेस्ट और इंटीग्रेशन टेस्ट लिखें कि आपके एक्शन और स्टेट अपडेट सही तरीके से काम कर रहे हैं।
अंतर्राष्ट्रीयकरण (i18n): वैश्विक अनुप्रयोगों के लिए, कई भाषाओं और संस्कृतियों का समर्थन करने के लिए i18n लागू करें।
स्थानीयकरण (l10n): स्थानीयकृत सामग्री, दिनांक प्रारूप और मुद्रा प्रतीक प्रदान करके अपने एप्लिकेशन को विशिष्ट लोकेल के अनुरूप बनाएं।

useActionState बनाम अन्य स्टेट मैनेजमेंट समाधान

जबकि useActionState एक्शन-आधारित स्टेट अपडेट को प्रबंधित करने का एक सुविधाजनक तरीका प्रदान करता है, यह सभी स्टेट मैनेजमेंट समाधानों का प्रतिस्थापन नहीं है। जटिल अनुप्रयोगों के लिए जिनमें वैश्विक स्टेट है जिसे कई कंपोनेंट्स में साझा करने की आवश्यकता है, रेडक्स, ज़स्टैंड, या जोटाई जैसी लाइब्रेरी अधिक उपयुक्त हो सकती हैं।

useActionState का उपयोग कब करें:

सरल से मध्यम जटिलता वाले स्टेट अपडेट।
एसिंक्रोनस एक्शन के साथ कसकर जुड़े हुए स्टेट अपडेट।
रिएक्ट सर्वर कंपोनेंट्स और सर्वर एक्शन के साथ एकीकरण।

अन्य समाधानों पर कब विचार करें:

जटिल वैश्विक स्टेट मैनेजमेंट।
ऐसी स्टेट जिसे बड़ी संख्या में कंपोनेंट्स में साझा करने की आवश्यकता है।
टाइम-ट्रैवल डिबगिंग या मिडलवेयर जैसी उन्नत सुविधाएँ।

निष्कर्ष

रिएक्ट का useActionState हुक एसिंक्रोनस एक्शन द्वारा ट्रिगर किए गए स्टेट अपडेट को प्रबंधित करने का एक शक्तिशाली और सुरुचिपूर्ण तरीका प्रदान करता है। लोडिंग और एरर स्टेट्स को समेकित करके, यह कोड को सरल बनाता है और पठनीयता में सुधार करता है, खासकर जब रिएक्ट सर्वर कंपोनेंट्स और सर्वर एक्शन के साथ काम कर रहे हों। इसकी ताकत और सीमाओं को समझने से आप अपने एप्लिकेशन के लिए सही स्टेट मैनेजमेंट दृष्टिकोण चुन सकते हैं, जिससे अधिक रखरखाव योग्य और कुशल कोड बनता है।

इस गाइड में उल्लिखित सर्वोत्तम प्रथाओं का पालन करके, आप अपने एप्लिकेशन के उपयोगकर्ता अनुभव और विकास वर्कफ़्लो को बढ़ाने के लिए useActionState का प्रभावी ढंग से लाभ उठा सकते हैं। अपने एप्लिकेशन की जटिलता पर विचार करना याद रखें और वह स्टेट मैनेजमेंट समाधान चुनें जो आपकी आवश्यकताओं के लिए सबसे उपयुक्त हो। सरल फॉर्म सबमिशन से लेकर जटिल डेटा म्यूटेशन तक, useActionState आपके रिएक्ट डेवलपमेंट शस्त्रागार में एक मूल्यवान उपकरण हो सकता है।